<cly-datatable-n
    :data-source="remoteTableDataSource"
    :export-api="getExportAPI"
    :max-height="maxHeight"
    :default-sort="{prop: 'start', order: 'descending'}">
    <template v-slot:header-left>
        <cly-dropdown ref="filterDropdown" :width="300" @hide="handleReloadFilter">
            <template v-slot:trigger="dropdown">
                <cly-input-dropdown-trigger
                    v-tooltip="filterSummary"
                    :selected-options="filterSummary"
                    :focused="dropdown.focused"
                    :opened="dropdown.visible"
                    :adaptive-length="true">
                </cly-input-dropdown-trigger>
            </template>
            <template>
                <cly-form 
                    :initial-edited-object="currentFilter"
                    ref="filterForm"
                    @submit="handleSubmitFilter"
                    class="report-manager-filter-form"
                >
                    <template v-slot="formScope">
                        <cly-form-step id="filter-form-step">
                            <div class="bu-m-4">
                                <div class="bu-level">
                                    <div class="bu-level-left">
                                        <div class="bu-level-item">
                                            <h4>{{i18n('report-manager.filters')}}</h4>
                                        </div>
                                    </div>
                                    <div class="bu-level-right">
                                        <div class="bu-level-item">
                                            <el-button type="text" class="cly-multi-select__reset" @click="handleResetFilter">
                                                {{i18n('report-manager.reset-filters')}}
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                                <cly-form-field :label="i18n('report-manager.origin')" v-if="!fixedOrigin">
                                    <el-select v-model="formScope.editedObject.selectedOrigin"  :placeholder="i18n('report-manager.select-origin')" class="select-full-width" placement="bottom-start">
                                        <el-option :key="value" v-for="(label, value) in availableOrigins" :label="label" :value="value"></el-option>
                                    </el-select>
                                </cly-form-field>
                                <cly-form-field :label="i18n('report-manager.status')">
                                    <el-select  v-model="formScope.editedObject.selectedState" :placeholder="i18n('common.select-status')" class="select-full-width" placement="bottom-start">
                                        <el-option :key="value" v-for="(label, value) in availableStates" :label="label" :value="value"></el-option>
                                    </el-select>
                                </cly-form-field>
                                <cly-form-field :label="i18n('report-manager.owner')">
                                    <el-select  v-model="formScope.editedObject.selectedOwner" :placeholder="i18n('common.select-owner')" class="select-full-width" placement="bottom-start">
                                        <el-option :key="value" v-for="(label, value) in availableOwners" :label="label" :value="value"></el-option>
                                    </el-select>
                                </cly-form-field>
                                <cly-form-field :label="i18n('report-manager.data-source')">
                                    <el-select  v-model="formScope.editedObject.selectedDataSource" :placeholder="i18n('report-manager.select-data-source')" class="select-full-width" placement="bottom-start">
                                        <el-option :key="value" v-for="(label, value) in availableDataSources" :label="label" :value="value"></el-option>
                                    </el-select>
                                </cly-form-field>
                                <cly-form-field :label="i18n('report-manager.runtime-type')" v-if="isManual">
                                    <el-select v-model="formScope.editedObject.selectedRunTimeType" :placeholder="i18n('common.select-type')" class="select-full-width" placement="bottom-start">
                                        <el-option :key="value" v-for="(label, value) in availableRunTimeTypes" :label="label" :value="value"></el-option>
                                    </el-select>
                                </cly-form-field>
                                <div class="bu-has-text-right bu-pt-3">
                                    <el-button type="secondary" @click="handleCancelFilter">{{i18n('common.cancel')}}</el-button>
                                    <el-button type="success" @click="formScope.submit()">{{i18n('common.apply')}}</el-button>
                                </div>
                            </div>
                        </cly-form-step>
                    </template>
                </cly-form>
            </template>
        </cly-dropdown>
    </template>
    <template>
        <el-table-column :label="i18n('report-manager.name-and-desc')">
            <template v-slot="scope">
                <unread-pin 
                    auto-read 
                    :task-id="scope.row._id" 
                    :app-id="scope.row.app_id">
                </unread-pin>
                {{ scope.row.report_name || scope.row.name || "-" }}
                <div class="report-manager-report-desc"> {{ scope.row.report_desc || "-" }}</div>
            </template>
        </el-table-column>
        <el-table-column v-if="!compact" :label="i18n('report-manager.data')">
            <template v-slot="scope">
                {{ scope.row.name || scope.row.meta || "" }}
            </template>
        </el-table-column>
        <el-table-column width="160" :label="i18n('common.status')">
            <template v-slot="scope">
                <div v-if="scope.row.taskgroup && scope.row.subtasks && scope.row.hasStatusDifferences">
                    <div v-for="subtask in scope.row.subtasks">
                        <cly-status-tag
                            :key="subtask._id"
                            :color="getColor(subtask.status)"
                            v-tooltip="subtask.errormsg"
                            :text="availableStates[subtask.status] || subtask.status">
                        </cly-status-tag>
                    </div>
                </div>
                <div v-else>
                    <cly-status-tag
                        v-tooltip="scope.row.errormsg"
                        :color="getColor(scope.row.status)"
                        :text="availableStates[scope.row.status] || scope.row.status">
                    </cly-status-tag>
                </div>
            </template>
        </el-table-column>
        <el-table-column v-if="!fixedOrigin" width="120" :label="i18n('taskmanager.origin')">
            <template v-slot="scope">
                <span class="status-color" style="text-transform:capitalize">{{scope.row.type}}</span>
            </template>
        </el-table-column>
        <el-table-column width="100" :label="i18n('common.type')" v-if="isManual">
            <template v-slot="scope">
                {{scope.row.autoRefresh ? i18n("taskmanager.auto") : i18n("taskmanager.manual")}}
            </template>
        </el-table-column>
        <el-table-column width="100" :label="i18n('report-manager.period')" v-if="isManual">
            <template v-slot="scope">
                {{scope.row.period_desc || "-"}}
            </template>
        </el-table-column>
        <el-table-column width="100" :label="i18n('report-manager.visibility')" v-if="isManual">
            <template v-slot="scope">
                {{scope.row.global === false ? 'Private' : 'Global'}}
            </template>
        </el-table-column>
        <el-table-column width="160" prop="start" sortable="custom" :label="i18n('common.last-updated')">
            <template v-slot="scope">
                {{ scope.row.startFormatted && scope.row.startFormatted.text }}
            </template>
        </el-table-column>
        <el-table-column width="160" :label="i18n('events.table.dur')" v-if="!isManual">
            <template v-slot="scope">
                {{ scope.row.duration }}
            </template>
        </el-table-column>
        <el-table-column align="center" type="options">
            <template v-slot="scope">
                <cly-more-options v-if="scope.row.hover" @command="handleCommand($event, scope.row)" placement="bottom-end">
                    <el-dropdown-item v-if="isReadyForView(scope.row) && isDownloadable(scope.row)" command="download-task">{{i18n('common.download')}}</el-dropdown-item>
                    <el-dropdown-item v-if="isReadyForView(scope.row) && !isDownloadable(scope.row)" command="view-task">{{getViewText(scope.row)}}</el-dropdown-item>
                    <el-dropdown-item v-if="isReadyForRerun(scope.row)" command="rerun-task">{{i18n('taskmanager.rerun')}}</el-dropdown-item>
                    <!-- <el-dropdown-item v-if="isManual" command="edit-task">{{i18n('taskmanager.edit')}}</el-dropdown-item> -->
                    <el-dropdown-item v-if="canDeleteReport" command="delete-task">{{i18n('common.delete')}}</el-dropdown-item>
                </cly-more-options>
            </template>
        </el-table-column>
    </template>
</cly-datatable-n>